Skip to main content

Quick Start - Vanilla

How to use dxchart5-react with vanilla apps​

You can use dxchart5-react as script, by importing it to your html file, or via npm.

Adding dxchart5-react as script​

For simple applications, that don't use any package manager such as npm and wire up third party packages via <script> tag dxchart5-react package provides a special version called widget. It's pretty simple to start with - the only thing you need is to call the function called createWidget, which attaches chart to a given HTML element.

Read more about dxchart5-react-widget with examples here

NOTE: To use dxchart5-react-widget you need to obtain different package - @dx-private/dxchart5-react-widget.

createWidget function​

After obtaining dxchart5-react-widget add it your JS folder (for example your folder with dxchart5-react-widget is ./dxchart.widget/)

Then, add two scripts to your html file to wire up dxchart5-react widget:

<script src="./dxchart.widget/dist/index.js"></script>

Here's a very basic example:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>DXCharts Vanilla JS</title>
	</head>
	<body>
		<div id="chart-widget" style="width: 800px; height: 500px"></div>
		<script src="./dxchart.widget/dist/index.js"></script>
		<script>
			DXChart.createWidget(document.getElementById('chart-widget'), {});
		</script>
	</body>
</html>

After this, you should see the following:

How to configure dxchart5-react-widget.​

Full configuration you can find in ./dxchart.widget/dist/widget.config.d.ts It contains all options for initial chart configuration.

export interface ChartReactWidgetProps
    extends DataProviderOptions,
        ChartDisplayOptions,
        StudiesOptions,
        FeatureToggleOptionsChartCore,
        FeatureToggleOptionsChartReact,
        ChartStorageOptions,
        ChartTypeOptions,
        ChartThemeOptions,
        DxFeedProvidersOptions,
        WidgetRenderingOptions,
        ChartSettingsOptions {
    readonly dependencies?: ChartReactWidgetDependencies;
    readonly onAPICreated?: (api: ChartReactAPI) => void;
}

For example, we configured width and height, symbol, and chartType for chart:

<script>
	DXChart.createWidget(
		document.getElementById('chart-widget'),
		{
			width: '800px',
			height: '576px',
			symbol: "MSFT",
			chartType: "line",
		}
	);
</script>

How to use API​

If you want to change something on chart from your host app, you can use onAPICreated dependency, and pass it to chart. Full list of available supported API is here

Take a look at example:

<script>
	const onAPICreated = (api) => {
		// Log a message to the console when the chart is created
		api.onChartCreated((chartId, chart) => {
			console.log(`Chart with id ${chartId} created and ready to use api!`)
		});

		// Change the theme of the chart to 'light'
		api.supported.changeTheme('light');

		// Send a notification message to the top of the chart
		api.supported.sendNotification('Your notification message at the top of the chart!');

		// ...other code, depends on your purposes
	}

	DXChart.createWidget(
		document.getElementById('chart-widget'),
		{
			width: '800px',
			height: '576px',
			symbol: "MSFT",
			chartType: "line",
			onAPICreated
		}
	);
</script>

Adding dxchart5-react via npm​

First of all you need to install library via npm. Please take a loook how to do it here After you should import a special function createChart, which attaches the ChartReactApp component to a given HTML element.

import { createChart } from '@dx-private/dxchart5-react/dist/index';
// append container somewhere in your app
const container = document.createElement('dxcharts-container');
createChart(container);

Configuring​

Second argument of function createChart passes configuration object.

export interface ChartReactProps {
    readonly dependencies: ChartAppDependencies;
    readonly data?: AppProps;
    readonly onApiCreated?: ChartReactAPICreatedCB;
    readonly uiOverrides?: DeepPartialOnlyRecord<UIOverrides>;
}

Take a look at example of using:

import { createChart } from '@dx-private/dxchart5-react/dist/index';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers/dist';
// append container somewhere in your app
const container = document.createElement('dxcharts-container');
createChart(container, {
    dependencies: {
        ...CREATE_MOCK_PROVIDERS(),
        chartReactConfig: {
            drawings: {
                sidebar: {
                    enabled: false,
                },
            },
            toolbar: {
                showButtonsTooltip: true,
            },
        },
        // The palette and colorPalette objects support all common color models: hex, rgb/rgba, hsl/hsla, default strings ('green', 'yellow', etc...),
        // but the most native for chart is rgba, so it's recommended to use it if possible
        colorPalette: [
            'rgb(255,255,0)',
            'rgba(0,0,0,1)',
            '#ad00fa',
            'green',
            'hsl(0, 100%, 50%)',
            'hsla(0, 100%, 64%, 0.2)',
        ],
        initialChartConfig: {
            components: {
                crossTool: {
                    // crosstool supports three types: 'cross-and-labels', 'only-labels' and 'none'
                    type: 'cross-and-labels',
                },
            },
        },
    },
});

With this example you should see the following:

How to use API​

There is a simple way to use APi, similar with chart script implementation:

import { createChart } from '@dx-private/dxchart5-react/dist/index';

// append container somewhere in your app
const container = document.createElement('dxcharts-container');

const onAPICreated = api => {
	// Log a message to the console when the chart is created
	api.onChartCreated((chartId, chart) => {
		console.log(`Chart with id ${chartId} created and ready to use api!`);
	});

	// Change the theme of the chart to 'light'
	api.supported.changeTheme('light');

	// Send a notification message to the top of the chart
	api.supported.sendNotification('Your notification message at the top of the chart!');

	// ...other code, depends on your purposes
};

// take a look: function `createChart` returns an object with method `destroy`,
// that allows you to unmount chart at any time
const destroyChart = createChart(container, {
	onApiCreated,
	dependencies: {
		// ...your configuration here
	},
});

// ...another place in your code, you decided to unmount chart after some action
destroyChart.destroy();

Further reading​